<script setup>
// 组件引入
import asideNavBar from '@/components/main/asideNavBar.vue'
import { ArrowRight, ArrowDown, CircleClose, InfoFilled} from '@element-plus/icons-vue'
import cover from '@/components/cover/cover.vue'
import InfoTip from '@/components/tipsCpns/info_tip.vue'
import PersonInfo from './components/PersonInfo.vue'

// 功能函数引入
import { getAsideData } from '@/assest/data/mainAsideData'
import { useCommonStore } from '@/store/commonStore'
import { storeToRefs } from 'pinia';
import eventBus from '@/utils/eventBus'
import router from '@/router/router';

const commonStore = useCommonStore();
const { 
  isShowCover, 
  isShowTipInfo, 
  tipInfoContent, 
  oplationType,
  isShowPersonInfo  
} = storeToRefs(commonStore)
// 获取登录角色的类型
const roleType = localStorage.getItem('roleType');
const name = localStorage.getItem('realName');
const navBars = getAsideData(Number(roleType));

// 顶部下拉菜单数据
const dropdownItems = [
  {
    id: 1,
    text: '退出系统',
    icon: CircleClose,
    type: 'exit-system'
  },
  {
    id: 2,
    text: '个人信息',
    icon: InfoFilled,
    type: 'person-info'
  }
]

// 下拉菜单点击
const dropItemClick = (type) => {
  if (type === 'exit-system') { // 退出系统
    exitSystem();
    return;
  }
  // 个人信息
  isShowPersonInfo.value = true;
}

// 退出系统
function exitSystem() {
  isShowTipInfo.value = true;
  tipInfoContent.value = '确定退出系统吗？'
  oplationType.value = 'exit'
  eventBus.on('exitSystem', function() {
    localStorage.removeItem('token'); // 删除token
    router.push('/login');  // 跳转到登录页面
  })
}

// 
</script>

<template>
  <div class="main_page">
    <el-container>
      <el-aside width="200px">
        <div class="title">学生宿舍管理系统</div>
        <aside-nav-bar :navBars="navBars"/>
      </el-aside>
      <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb 
          :separator-icon="ArrowRight" 
          class="breadcrumb" 
          v-if="$router.currentRoute.value.name !== '个人信息'">
          <div class="left">
            <el-breadcrumb-item>系统管理员</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">
              {{ $router.currentRoute.value.name}}
            </el-breadcrumb-item>
          </div>
          <div class="right">
            <img src="../../assest/images/bg.webp" alt="" class="avatar">
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ name }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <template v-for="item of dropdownItems" :key="item.id">
                    <el-dropdown-item @click="dropItemClick(item.type)">
                      <el-icon v-if="item.id === 1"><CircleClose /></el-icon>
                      <el-icon v-else-if="item.id === 2"><InfoFilled /></el-icon>
                      {{ item.text }}
                    </el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-breadcrumb>

        <!-- 内容展示 -->
        <router-view></router-view>

        <!-- 个人信息 -->
        <person-info /> 

        <!-- 蒙版 -->
        <transition name="cover">
          <cover v-if="isShowCover" />
        </transition>

        <!-- 信息提示组件 -->
        <info-tip />

      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.main_page {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  .el-container {
    .el-aside {
      width: 200px;
      height: 100vh;
      background-color: #545c64;
      .title {
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        font-size: 22px;
        font-weight: 600;
      }
    }
    .el-main {
      .breadcrumb {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 20px;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        font-weight: 600;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1) inset;
        box-sizing: border-box;
        .left {
          flex: 1;
        }
        .right {
          display: flex;
          align-items: center;
          .avatar {
            margin-right: 10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
.el-main {
  height: 100vh;
}
// 设置下拉菜单的文字颜色等样式
.example-showcase, .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  font-weight: 400;
  display: flex;
  align-items: center;
}

/* 解决下拉菜单鼠标移入有边框 */
:deep(.el-tooltip__trigger:focus-visible) {
    outline: unset;
}
</style>